/**
 * 问卷调查（react 组件形式）
 * 需求：
 *  主题自选
 *  1. 问卷标题
 *  2. 问卷内容
 *   - 单选题
 *   - 多选题
 *   - 问答题
 *  3. 提交按钮
 *
 * 逻辑要求：
 *  1. 问卷标题：显示问卷标题
 *  2. 问卷内容：显示问卷内容
 *  3. 提交按钮：提交问卷
 *
 * 提示：
 *   问卷内容使用 tdesign-react 提供的 Form 组件, 导入方式为 import { Form } from 'tdesign-react'
 *   单选题使用 tdesign-react 提供的 Radio 组件, 导入方式为 import { Radio } from 'tdesign-react'
 *   多选题使用 tdesign-react 提供的 Checkbox 组件, 导入方式为 import { Checkbox } from 'tdesign-react'
 *   问答题使用 tdesign-react 提供的 Input 组件, 导入方式为 import { Input } from 'tdesign-react'
 *   提交按钮使用 tdesign-react 提供的 Button 组件, 导入方式为 import { Button } from 'tdesign-react'
 *   时间使用 moment 中的 format 格式化方法
 *
 * 后续要求：
 *  把问卷的答案保存到 nedb 数据库中
 */

/**
 * 调查问卷举例：
 *
 * 主题：程序员日常生活调查
 *
 * 问题一：你的工作时间是多少？ 单选：8h 9h 10h 12h及以上
 * 问题二：你的性别是什么？ 单选：男、女
 * 问题三：你有多少个对象？单选：1个 2个 3个 4个及以上
 * 问题四：你是前端还是后端？ 单选：前端、后端、全栈
 * 问题五：你最喜欢的编程语言是什么？ 多选：Java、C++、Python、JavaScript、C#、PHP、Ruby、Swift、Kotlin、Rust
 * 问题六：你最喜欢的游戏是什么？多选：王者荣耀、穿越火线、QQ飞车、英雄联盟、和平精英、阴阳师、魔兽世界
 * 问题七：你最喜欢的运动是什么？ 问答：
 * 问题八：你的工作地点是哪里？ 问答：
 */
import { useEffect, useState } from 'react'
import { apis, ApiRequest } from '@/service'
import { MessagePlugin, Radio, Tabs } from 'tdesign-react'
import RenderQuestionnaire from './RenderQuestionnaire'
const {
  practiceService: {
    insertAnswer, // 提交问卷
    getAnswer, // 获取已经提交的问卷结果
    getQuestionnaireList, // 获取所有问卷调查信息
    getUserList,
  }
} = apis

const { TabPanel } = Tabs

type userType = {
  userName: string,
  userId: string,
}

type tabType = {
  label: string,
  tabKey: string,
}

type OptionType = {
  label: string,
  value: string,
}

type QuestionTypeType = 'radio' | 'checkbox' | 'input' | ''

type QuestionType = {
  title: string,
  type: QuestionTypeType,
  optionList: OptionType[], 
}

type questionnaireType = {
  title: string,
  questionList: QuestionType[],
  submitNumber: '0'
}


const Questionnaires = () => {

  const [currentUser, setCurrentUser] = useState<userType>()
  const [tabKey, setTabKey] = useState<string>('questionnaire0')
  const [questionnaires, setQuestionnaires] = useState<questionnaireType[]>([])
  const [userList, setUserList] = useState<userType[]>([])

  // const questionnaires1 = {
  //   title: '程序员普调',
  //   questionList: [
  //     {
  //       title: '你的工作时间是多少？',
  //       type: 'radio',
  //       radioList: [
  //         {
  //           label: '8h',
  //           value: '1'
  //         },
  //         {
  //           label: '9h',
  //           value: '2'
  //         },
  //         {
  //           label: '10h',
  //           value: '3'
  //         },
  //         {
  //           label: '12h及以上',
  //           value: '4'
  //         },
  //       ]
  //     },
  //     {
  //       title: '你的性别是什么？',
  //       type: 'radio',
  //       radioList: [
  //         {
  //           label: '男',
  //           value: '1'
  //         },
  //         {
  //           label: '女',
  //           value: '0'
  //         },
  //       ]
  //     },
  //     {
  //       title: '你最喜欢的编程语言是什么？',
  //       type: 'checkbox',
  //       radioList: [
  //         {
  //           label: 'Java',
  //           value: '1',
  //         },
  //         {
  //           label: 'C++',
  //           value: '2',
  //         },
  //         {
  //           label: 'Python',
  //           value: '3',
  //         },
  //         {
  //           label: 'JavaScript',
  //           value: '4',
  //         },
  //         {
  //           label: 'C#',
  //           value: '5'
  //         },
  //       ]
  //     },
  //     {
  //       title: '你的工作地点是哪里？',
  //       type: 'input',
  //     }
  //   ],
  //   submitNumber: 0,
  // }

  // const questionnaires2 = {
  //   title: '学历调查',
  //   questionList: [
  //     {
  //       title: '你的最高学历是什么？',
  //       type: 'radio',
  //       radioList: [
  //         {
  //           label: '专科',
  //           value: '1'
  //         },
  //         {
  //           label: '本科',
  //           value: '2'
  //         },
  //         {
  //           label: '硕士',
  //           value: '3'
  //         },
  //         {
  //           label: '博士',
  //           value: '4'
  //         },
  //       ]
  //     },
  //     {
  //       title: '你的专业是什么？',
  //       type: 'input',
  //     },
  //   ]
  // }

  // const questionnaires = [
  //   questionnaires1,
  //   questionnaires2
  // ]

  /**
   * t: 因为没有添加用户的功能，这里先使用假数据
   */
  // const userList: userType[] = [
  //   {
  //     username: '青子',
  //     userId: '10086'
  //   },
  //   {
  //     username: '家宝',
  //     userId: '10010',
  //   }
  // ]

  // 初始化当前用户
  useEffect(() => {
    // setCurrentUser(userList[0])
    getQuestionnaireListFnc()
    getUserListFnc()
  }, [])


  // 获取答案
  // useEffect(() => {
  //   // 当用户改变的时候，请求接口
  //   currentUser?.userId && getAnswerFunction()
  // }, [currentUser])

  const getAnswerFunction = () => {
    // 如果我不想改变这个变量的名称太对了，你刚刚好像有问题，什么问题，不知道啊，你刚刚不是在打字吗 没啥问题gangcxiang说这个，没问题，这也对，好，再试一下
    const params =  {
      userId: currentUser?.userId
    }
    // // 这里的params 可以直接简写为 params 为什么呢；它是一个变量啊，这样可以吗？可以啊，好，看看是否能给这个接口传递数据
    // // 再来看这个问题，为什么 params 可以简写成 params，而 api 不能简写成 getAnswer键和值不一样，是的
    // {
    //   api: getAnswer,
    //   params: params
    // } // 这是完整的写法，
    // 如果简写的话，如果 api 也简写的话 ，这个值，根本用不到，为什么
    // {
    //   getAnswer, params,
    // }函数里面用的api，对，终于懂了，之所以可以简写，是因为，键与函数里面的用到的键，是相同的，而且作为值的变量，也是这个名字，三者相同，所以可以简写
    ApiRequest({ api: getAnswer, params }).then((res: any) => {
      const { code = 'error', data = [], note = '' } = res
      if (code == 'ok') {
        // 现在尝试完善服务端，获取用户id 为 当前用户的数据
        console.log('res',res)
        MessagePlugin.success(note, 2000)
      }
    })
    // // 这是啥 { api, params } 这样一个对象是对不对嗯
    // // 那我想问一下
    // const func2 = ({api, params}: {api: any, params1: any}) => {
    //   // 这里的 params 是什么，好，这里的 params是什么 ，好
    //   // 这里的 params 是什么，什么！！！！！！。哎哟我的宝宝，别急别急 传了一个params1也就是{api, params} 等于 { api: insertAnswer, params1 } 然后
    // }
    // const obj1 = {
    //   api: '111',
    //   params: '111'
    // }
    // const obj2 = {
    //   api: '', // 形参
    //   params: '', // 形参
    // }
    // 那么 obj2.params 就等于 obj1.paramsen 
    // 形参 obj2 是不是 等于 实参 obj1 en 
    // 那 我使用 没有，undefinerams 是不是等于 obj1.params shia ,好，params 是什么
    // 对，所以，如果有这么一个函数，func2，我期待外面传进来一个对象，然后我要在函数里面，用形参去获取形参对象里面的一个值，也就是 params，但是您老直接传了个 params1，
    // 我能取到吗？不能啊，是的，这就是原理 那我怎么渠道呢，由于这个函数已经是黑箱状态了（也就是无法再修改了），只能让外面穿进去的值跟里面取的值保持一致
    // 这就解决了
    // func2({ api: insertAnswer, params })
  }


  const insertAnswerFunction = (params: any) => {

    // 参数加上用户的 id
    params = {
      title: '程序员日常生活调查',
      userId: currentUser?.userId,
      ...params
    }
    // 这里调用，那么还需要在服务器上写一个对应的接口
    ApiRequest({ api: insertAnswer, params }).then((res: any) => {
      const { code = 'error', data = [], note = '' } = res
      if (code == 'ok') {
        MessagePlugin.success(note, 2000)
      }
    })
  }

  const onSubmit = (event: any) => {
    // 提交的怎么用这么个名字，离谱，这不你写的吗我写的只是举个例子，好吧
    // 这里也传了参数对不对 嗯，那你来看看怎么了，前面获取 answer 的接口没参数啊 是啊不知道传什么，已经传了啊
    // 意思没传呗，这里重新讲一下哈，注意看
    // const { userId } = { userId: '10086' } // 怎么才能取到这个 userid ｛｝是什么，，， {} 是对象宝宝这个对象有名字吗没有
    // // 好，再复习一下解构赋值就取到了是的，好，进阶一下
    // const obj = {
    //   userId: '10010'
    // }
    // const func1 = (funcParams: any) => {
    //   // 需要拿到 userId 的值
    //   console.log(funcParams)
    // }
    // func1(obj) // 这里传入 obj 要怎么拿到 userid 的值呢
    // // 其实 传入 obj 之后 funcParams 的值是不是就是 obj 的值是啊，那怎么拿funcParams.userId，是的，再进阶一下
    // // obj 是不是等于 funcParams ？嗯呐

    // const params: any = { userId: '10086' }
    // const func2 = ({ params }: {params: any}) => {
    //   // 这里要拿到 params 的值

    // } 
    // func2(params) 

    // 解构 是把一个对象剥开，然后拿里面的东西
    // 但是这个东西它得有，你才能拿
    // 例如：
    // const obj1 = {
    //   username: '李家',
    //   userId: '10010'
    // }
    // const obj2 = {
    //   params: params
    // }
    // // obj1 等于 { params } 等于 obj2 对不对对，
    // 那么 params 等于多少？
    // 再多问一句，obj2.params 是不是就等于 obj1.params ? 不会CPU烧了吧obj1点不出来啊，所以是 undefined
    // // // 我想拿到 username, 怎么拿
    // // // const username = obj1.username // 这是一种对吧嗯
    // // const { username } = obj1 // 这也是一种，但是我现在还没拿嗯，可以理解为我现在构造了一个空对象，这个空对象 等于 obj1，但是这个对象没名字 所以我也没法用嗯
    // // // 如果我不想使用空对象，单纯只是想用里面的 username, 我就可以写一个 username 去获取 obj1 中的 username
    // // 这一句话等于
    // // const obj2 = obj1
    // // const username = obj2.name // 能理解不行，还是很好理解的，你就当做把 obj1 剥开了，把里面的username 拿出来知道

    // const func1 = ({params}: {params: any}) => { // 这个 {params} 是不是跟 obj2 相等嗯，好，这个 { params} 是不是跟 obj1 相等是的
    //   console.log('params', params)
    // }
    // func1(obj1) // 这个 params 等于啥
    // 别急 简单点，就是括号里面传了什么，那么形参括号里面的所有东西就是这个实参，这一坨，全都是 obj1 en 
    // 好，问题来了，这都不是重点，重点在这里等下 好

    insertAnswerFunction(event.fields)
    console.log(event)
  }

  const onReset = () => {

  }

  const getQuestionnaireListFnc = () => {
    ApiRequest({ api: getQuestionnaireList }).then((res: any) => {
      const { code = 'error', data = [], note = '' } = res
      if (code == 'ok') {
        setQuestionnaires(data) // set完成之后应该做一件事，是什么事呢
      }
    })
  }
  
  const getUserListFnc = () => {
    ApiRequest({ api: getUserList }).then((res: any) => {
      const { code = 'error', data = [], note = '' } = res
      if (code == 'ok') {
        setUserList(data)
        setCurrentUser(data[0]) 
      }
    })
  }

  // 选择用户
  const onUserChange = (event: any) => {
    // 刚刚在尝试获取用户名 使用filter 方法筛选出与 event 相同的item，并将返回的数组的第一项赋值给 currentUser
    setCurrentUser(userList.filter((item: userType) => item.userId === event)[0])
  }

  const renderQuestionnaire = () => {
    return questionnaires.map((item: any, index: number) => {
      return <TabPanel label={item.title} value={`questionnaire` + index} key={index}>
        <RenderQuestionnaire title={item.title} questionList={item.questionList} currentUser={currentUser} />
      </TabPanel>
    })
  }

  return <div className='write-questionnaires'>
    <div className='select-user-tips'>请选择用户</div>
    <Radio.Group value={currentUser?.userId} onChange={(event) => { onUserChange(event) }}>
      {userList.map((item: userType) => {
        return <Radio value={item.userId} key={item.userId}>{item.userName}</Radio>
      })}
    </Radio.Group>
    <Tabs
      className='write-questionnaires-tabs'
      placement='top'
      size='medium'
      defaultValue={tabKey}
      onChange={(value) => { setTabKey(value as string) }}
    >
      {renderQuestionnaire()}
    </Tabs>

  </div>
}

export default Questionnaires